<!DOCTYPE html>
<html>
    <head>
        <title>Dicom Viewer</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width">

        <!--CSS-->
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <link rel="stylesheet" href="css/jquery-ui-bootstrap-1.10.0.custom.css" />
        <link rel="stylesheet" href="css/main.css" />
        <link rel="stylesheet" href="js/libs/jQuery-UI-FileInput/css/enhanced.css" />
        <link rel="stylesheet" href="js/libs/SelectBoxIt/jquery.selectBoxIt.css" />

        <!-- jQuery & Plugins -->
        <script type="text/javascript" src="js/libs/jquery-2.0.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/libs/jquery-ui-1.10.3/jquery-ui.custom.min.js"></script>
        <script type="text/javascript" src="js/libs/jqueryTree/jquery.tree.js"></script>
        <!-- FileInput -->
        <script src="js/libs/jQuery-UI-FileInput/js/enhance.min.js" type="text/javascript"></script>
        <script src="js/libs/jQuery-UI-FileInput/js/fileinput.jquery.js" type="text/javascript"></script>
        <!--SelectBoxIt-->
        <script src="js/libs/SelectBoxIt/jquery.selectBoxIt.min.js"></script>

        <!-- External jsdicom-lib -->
        <script type="text/javascript" src="js/libs/jsdicom-lib/src/dcmdict.js"></script>
        <script type="text/javascript" src="js/libs/jsdicom-lib/src/binutils.js"></script>
        <script type="text/javascript" src="js/libs/jsdicom-lib/src/dcmfile.js"></script>
        <script type="text/javascript" src="js/libs/jsdicom-lib/src/dicomparser.js"></script>
        <script type="text/javascript" src="js/libs/jsdicom-lib/src/transfersyntax.js"></script>
        <script type="text/javascript" src="js/libs/jsdicom-lib/src/qr.js"></script>

        <!--Dicom Viewer-->
        <script type="text/javascript" src="js/DcmViewer.js"></script>
        <script type="text/javascript" src="js/FileParser.js"></script>
        <script type="text/javascript" src="js/CanvasPainter.js"></script>
        <script type="text/javascript" src="js/Toolbox.js"></script>
        <script type="text/javascript" src="js/Tree.js"></script>

        <!-- Tools -->
        <script type="text/javascript" src="js/tools/WindowLevel.js"></script>
        <script type="text/javascript" src="js/tools/Zoom.js"></script>
        <script type="text/javascript" src="js/tools/Move.js"></script>
        <script type="text/javascript" src="js/tools/Roi.js"></script>

        <script>
            $(document).ready(function() {
                var dcmViewer = new DcmViewer();
                dcmViewer.init();

                $('#dicomUpload').customFileInput({
                    button_position: 'right'
                }).change(function(e) {
                    dcmViewer.inputHandler(e);
                });
                $('#fileTree').click(function(e) {
                    dcmViewer.treeClick(e);
                });
                $('#buttonSet').buttonset().change(function() {
                    dcmViewer.setCurrentTool($("input[name='toolbox-buttons']:checked").val());
                });
                $('#matrixView').selectBoxIt().change(function(e) {
                    dcmViewer.matrixHandler(e.target.value);
                });
                $('#resetButton').button().click(function() {
                    dcmViewer.resetHandler();
                });
                $('#metaButton').button().click(function() {
                    if(dcmViewer.eventsEnabled) {
                        $('#metaDialog').empty().append(dcmViewer.openMetaDialog()).dialog({
                            height: 600,
                            width: 600
                        });
                    }
                });
                $('#showStudyData').button().click(function() {
                    if($('.studyInfo').is(':visible')) {
                        $('.studyInfo').hide();
                        $('.patientInfo').hide();
                        $('#showStudyData').text('Show Infos').val(false);
                    } else {
                        $('.studyInfo').show();
                        $('.patientInfo').show();
                        $('#showStudyData').text('Hide Infos').val(true);
                    }
                });

                $('#viewerScreen').click(function(e) {
                    dcmViewer.eventHandler(e);
                }).mousemove(function(e) {
                    dcmViewer.eventHandler(e);
                }).mousedown(function(e) {
                    e.preventDefault();
                    dcmViewer.eventHandler(e);
                }).mouseup(function(e) {
                    dcmViewer.eventHandler(e);
                }).mouseout(function(e) {
                    dcmViewer.eventHandler(e);
                }).bind('mousewheel', function(e) {
                    if(dcmViewer.numFiles > 1) {
                        e.preventDefault();
                        var num = dcmViewer.scrollHandler(e);
                        $('#slider').slider('value', num);
                    }
                }).bind('DOMMouseScroll', function(e) { // scroll event for firefox
                    if(dcmViewer.numFiles > 1) {
                        e.preventDefault();
                        var num = dcmViewer.scrollHandler(e);
                        $('#slider').slider('value', num);
                    }
                });

                // Shortcuts for move, zoom and windowLevel
                $(window).keydown(function(e) {
                    // strg/ctrl or Mac cmd key
                    if(e.ctrlKey || e.keyCode === 91) {
                        $('#move').click();
                    }
                    if(e.altKey) {
                        $('#windowLevel').click();
                    }
                    if(e.shiftKey) {
                        $('#zoom').click();
                    }
                    //capslock
                    if(e.keyCode === 20) {
                        $('#roi').click();
                    }
                    return;
                });

                $("#slider").slider({
                    disabled: true
                });
                $('#progressBar').progressbar({
                    value: 1
                }).hide();
            });

            var progress = function(numFiles) {
                var me = $('#progressBar').show().find('div').addClass('ui-corner-right');
                $('*').css('cursor', 'wait');
                $('#errorMsg').empty();
                $('#fileTree').hide();
                var worker = new Worker('js/Progress.js');

                worker.onmessage = function(e) {
                    var num = e.data;
                    if(num >= 100) {
                        $('#progressBar').hide();
                        $('*').css('cursor', 'default');
                        $('#fileTree').fadeIn(100).show();
                        me.css('width', '1px');
                    } else {
                        me.css('width', num + '%');
                    }
                };
                worker.postMessage(numFiles);
            };
        </script>
    </head>
    <body>
        <div id="container">
            <aside id="sidebar">
                <!--Only Chrome supports webkitdirectory-->
                <div id="inputContainer" class="ui-toolbar ui-widget-header">
                    <input id="dicomUpload" type="file" webkitdirectory multiple />
                    <div id="progressBar"></div>
                </div>
                <!--Error messages-->
                <div id="errorMsg"></div>

                <div id="fileTree"></div>
            </aside>
            <div id="viewer">
                <div id="toolboxHeader">
                    <div id="toolbox" class="ui-toolbar ui-widget-header clearfix">
                        <div id="buttonSet">
                            <input type="radio" id="windowLevel" name="toolbox-buttons" value="Window level" checked="checked" /><label for="windowLevel">Window level</label>
                            <input type="radio" id="move" name="toolbox-buttons" value="Move" /><label for="move">Move</label>
                            <input type="radio" id="zoom" name="toolbox-buttons" value="Zoom" /><label for="zoom">Zoom</label>
                            <input type="radio" id="roi" name="toolbox-buttons" value="Roi" /><label for="roi">ROI</label>
                        </div>

                        <div id="singleButtons">
                            <select id="matrixView" name="matrixView">
                                <option value="1,1" selected>1 x 1</option>
                                <option value="1,2">1 x 2</option>
                                <option value="2,2">2 x 2</option>
                                <option value="4,4">4 x 4</option>
                            </select>
                            <button type="button" id="metaButton" value="Meta-Daten">Meta-Data</button>
                            <button type="button" id="resetButton" value="Reset">Reset</button>
                            <button type="button" id="showStudyData" value="true">Hide Infos</button>
                        </div>
                        <div id="slider"></div>
                    </div>
                </div>

                <div id="viewerScreen"></div>

                <div id="metaDialog" title="Meta-Daten"></div>
            </div>
        </div>
    </body>
</html>
